export default {
	data() {
		return {
			viewWidth: document.body.clientWidth,
			viewHeight: document.body.clientHeight
		};
	},
	computed: {
		commonRowStyle() {
			return this.compute("", "commonRowStyle");
		},
		sumRowStyle() {
			return this.compute("", "sumRowStyle");
		},
		menuWidth() {
			return this.compute("", "menuWidth");
		},
		standMenuWidth() {
			return this.isCollapse ? 64 : 213;
		},
		widthRatio() {
			if (this.viewWidth >= this.constants.base.window.innerWidth) {
				return 1;
			} else {
				return (this.viewWidth - (+this.menuWidth.replace("px", ""))) / (this.constants.base.window.innerWidth - this.standMenuWidth);
			}
		},
		heightRatio() {
			return (this.viewHeight - (80 + 40 + 30)) / (this.constants.base.window.innerHeight - (80 + 40 + 30));
		}
	},
	methods: {
		compute(value, kind) {
			if (kind === "commonRowStyle") {
				value = this.computeRowStyle(`calc(5.62vh)`);
			} else if (kind === "sumRowStyle") {
				value = this.computeRowStyle(`calc(4.6vh)`);
			} else if (kind === "menuWidth") {
				value = this.computeMenuWidth("64px", "213px");
			}
			return value;
		},
		computeRowStyle(value) {
			return {height: value};
		},
		computeMenuWidth(oldValue, newValue) {
			return this.isCollapse ? oldValue : newValue;
		}
	}
};
